<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base target="_blank"/>
    <title>基本标签</title>
</head>
<body>

<!--表单-->
<h3>表单</h3>
<table width="600" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>单行文本框</td>
        <td><input type="text" value="slx"></td>
    </tr>
    <tr>
        <td>单选按钮</td>
        <td>
            男<input type="radio" name="sex"/>女<input type="radio" name="sex"/>
        </td>
    </tr>
    <tr>
        <td>多选按钮</td>
        <td>
            篮球<input type="checkbox" name="ball" checked="checked"/>足球<input type="checkbox" name="ball"/>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="button" value="注册">
            <input type="image" src="../image/btn.png">
        </td>
    </tr>
    <tr>
        <td>头像</td>
        <td>
            <input type="file">
        </td>
    </tr>
    <tr>
        <td>label的使用（点文字输入光标直接定位到输入框和）</td>
        <td>
            <label>城市：<input type="text"></label>
        </td>
    </tr>
    <tr>
        <td>下拉框</td>
        <td>
            <select name="city" id="city">
                <option value="">请选择城市</option>
                <option value="qd">青岛市</option>
                <option value="wh" selected="selected">威海市</option>
                <option value="yt">烟台市</option>
            </select>
        </td>
    </tr>

</table>

<hr>
<!--表格-->
<h3>表格</h3>
<!--cellpadding内容与单元格边框距离padding cellspacing单元格间距离margin-->
<!--table中 border、cellspacing、cellpadding一般设置为0-->
<table width="500" border="1" align="center" cellspacing="10" cellpadding="12">
    <caption>这里是表格标题</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>电话</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>fauks</td>
        <td>男</td>
        <td>123</td>
        <td rowspan="2">优秀</td>
    </tr>
    <tr>
        <td>bob</td>
        <td>女</td>
        <td>898</td>
    </tr>
    <tr>
        <td colspan="4">批注</td>
    </tr>
</table>
<hr/>

<!--简单标签-->
<a href="https:www.baidu.com">使用了base标签-->所有连接以新窗口打开</a><br/>

<!--前面有两个base标签所以会默认新网页打开-->
<a href="#p" target="_self">锚点的使用</a><br/>
<img src="../image/lu.JPG" alt="这是一个路" title="宁静的路" width="300" height="100"/><br/>
<h3>格式标签</h3>
<b>常规加粗</b>&nbsp;|&nbsp;<strong>strong语义更强</strong><br/>
<i>常规倾斜</i>&nbsp;|&nbsp;<em>em语义更强</em><br/>
<s>常规删除线</s>&nbsp;|&nbsp;<del>del语义更强</del>
<br/>
<u>常规下划线</u>&nbsp;|&nbsp;<ins>ins</ins>
<br/>
<hr/>

<h3>特殊字符</h3>
&lt;p&gt;是段落标签<br/>
<p id="p">锚点跳转过来</p>

<hr>

<!--列表-->
<h3>无序列表</h3>
<ul>
    <li>Java</li>
    <li>Android</li>
    <li>IOS</li>
</ul>
<h3>有序列表</h3>
<ol>
    <li>第一名</li>
    <li>第二名</li>
    <li>第三名</li>
    <li>
        <h4>其他名次</h4>
        <p>第十名、第十一名</p>
    </li>
</ol>
<h3>自定义列表</h3>
<dl>
    <dt>青岛</dt>
    <dd>崂山区</dd>
    <dd>市北区</dd>
    <dd>城阳区</dd>
    <dt>威海</dt>
    <dd>文登市</dd>
    <dd>乳山市</dd>
    <dd>荣成市</dd>
</dl>
</body>
</html>